<div class="tab-receiver">
    <div class="content_wrapper">
        <div class="tab_title" i18n="tabReceiver"></div>
        <div class="cf_doc_version_bt">
            <a id="button-documentation" href="" target="_blank" rel="noopener noreferrer"></a>
        </div>
        <div class="note">
            <p i18n="receiverHelp"></p>
        </div>
        <div class="grid-row grid-box col5">
            <div class="col-span-2">
                <div class="gui_box grey tunings topspacer">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title" i18n="receiverModelPreview"></div>
                    </div>
                    <div class="model_preview_cell spacer_box">
                        <div class="model_preview background_paper">
                            <canvas id="canvas"></canvas>
                        </div>
                    </div>
                </div>
                <div class="bars"></div>
            </div>
            <div class="col-span-3">
                <!-- RECEIVER -->
                <div class="receiver">
                    <div class="gui_box receiver grey">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="configurationReceiver"></div>
                        </div>
                        <div class="spacer_box">
                            <select id="rxModeSelect" class="features rxMode" name="rxMode">
                                <!-- list generated here -->
                            </select>
                            <span i18n="configurationReceiverMode"></span>
                        </div>
                        <div class="serialRXBox spacer_box">
                            <div class="note">
                                <p i18n="configurationSerialRXHelp"></p>
                            </div>
                            <select class="serialRX">
                                <!-- list generated here -->
                            </select>
                            <span i18n="configurationSerialRX"></span>
                            <div class="note someRXTypesDisabled" i18n="someRXTypesDisabled">
                            </div>
                            <div class="note gui_warning serialRXNotSupported" i18n="serialRXNotSupported">
                            </div>
                        </div>
                        <div class="spiRxBox spacer_box">
                            <div class="note">
                                <p i18n="configurationSpiRxHelp"></p>
                            </div>
                            <select class="spiRx">
                                <!-- list generated here -->
                            </select>
                            <span i18n="configurationSpiRX"></span>
                        </div>
                        <div id="elrsContainer" class="elrsContainer spacer_box">
                            <div class="number">
                                <input type="text" class="elrsBindingPhrase">
                                <span i18n="receiverButtonBindingPhrase"></span>
                            </div>
                            <div>
                                <span class="elrsUid"></span>
                            </div>
                            <div class="number">
                                <input type="number" name="elrsModelId-number" min="0" max="255"/>
                                <span i18n="receiverModelId"></span>
                                <div class="helpicon cf_tip" i18n_title="receiverHelpModelId"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid-box col6">
                    <div class="gui_box grey col-span-3">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="configurationTelemetry"></div>
                            <div class="helpicon cf_tip" i18n_title="configurationTelemetryHelp"></div>
                        </div>
                        <div class="spacer_box">
                            <table>
                                <tbody class="features telemetry">
                                    <!-- table generated here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="gui_box grey col-span-3">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="configurationRSSI"></div>
                            <div class="helpicon cf_tip" i18n_title="configurationRSSIHelp"></div>
                        </div>
                        <div class="spacer_box">
                            <table>
                                <tbody class="features rssi">
                                    <!-- table generated here -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="gui_box grey col-span-3">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="receiverRssiChannel"></div>
                        </div>
                        <select name="rssi_channel">
                            <!-- list generated here -->
                        </select>
                    </div>
                    <div class="gui_box grey col-span-3">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="receiverChannelMap"></div>
                        </div>
                        <div class="hybrid_element">
                            <input type="text" name="rcmap" spellcheck="false" />
                            <select class="hybrid_helper"
                                    name="rcmap_helper">
                                <option i18n="receiverChannelDefaultOption" value="AETR1234"></option>
                                <option value="AETR1234">FrSky / Futaba / Hitec (AETR1234)</option>
                                <option value="TAER1234">Spektrum / Graupner / JR (TAER1234)</option>
                            </select>
                        </div>
                    </div>
                    <div class="gui_box grey col-span-2 sticks">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="receiverStickMin"></div>
                        </div>
                        <div class="input-helpicon-flex">
                            <input type="number" name="stick_min" min="1000" max="1200"/>
                            <div class="helpicon cf_tip" i18n_title="receiverHelpStickMin"></div>
                        </div>
                    </div>
                    <div class="gui_box grey col-span-2 sticks">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="receiverStickCenter"></div>
                        </div>
                        <div class="input-helpicon-flex">
                            <input type="number" name="stick_center" min="1401" max="1599"/>
                            <div class="helpicon cf_tip" i18n_title="receiverHelpStickCenter"></div>
                        </div>
                    </div>
                    <div class="gui_box grey col-span-2 sticks">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="receiverStickMax"></div>
                        </div>
                        <div class="input-helpicon-flex">
                            <input type="number" name="stick_max" min="1800" max="2000"/>
                            <div class="helpicon cf_tip" i18n_title="receiverHelpStickMax"></div>
                        </div>
                    </div>
                    <div class="gui_box grey col-span-2 deadband">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="receiverDeadband"></div>
                        </div>
                        <div class="input-helpicon-flex">
                            <input type="number" name="deadband" min="0" max="32"/>
                            <div class="helpicon cf_tip" i18n_title="receiverHelpDeadband"></div>
                        </div>
                    </div>
                    <div class="gui_box grey col-span-2 deadband">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="receiverYawDeadband"></div>
                        </div>
                        <div class="input-helpicon-flex">
                            <input type="number" name="yaw_deadband" min="0" max="100"/>
                            <div class="helpicon cf_tip" i18n_title="receiverHelpYawDeadband"></div>
                        </div>
                    </div>
                    <div class="gui_box grey col-span-2 deadband">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="recevier3dDeadbandThrottle"></div>
                        </div>
                        <div class="input-helpicon-flex">
                            <input type="number" name="3ddeadbandthrottle" min="0" max="100"/>
                            <div class="helpicon cf_tip" i18n_title="receiverHelp3dDeadbandThrottle"></div>
                        </div>
                    </div>
                </div>
                <div class="gui_box grey tunings topspacer rcSmoothing">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title" i18n="receiverRcSmoothing"></div>
                    </div>
                    <table class="rcSmoothing-table">
                        <tr class="rc-smoothing-type">
                            <td>
                                <select name="rcSmoothing-select">
                                    <option class="rcSmoothingOff" value="0" i18n="receiverRcSmoothingInterpolation"></option>
                                    <option class="rcSmoothingOn" value="1" i18n="receiverRcSmoothingFilter"></option>
                                </select>
                            </td>
                            <td colspan="2">
                                <div>
                                    <label class="rcSmoothingMode">
                                        <span i18n="receiverRcSmoothingMode"></span>
                                    </label>
                                </div>
                            </td>
                        </tr>
                        <tr class="rcSmoothing-setpoint-manual">
                            <td>
                                <select name="rcSmoothing-setpoint-manual-select">
                                    <option value="0" i18n="receiverRcSmoothingAuto"></option>
                                    <option value="1" i18n="receiverRcSmoothingManual"></option>
                                </select>
                            </td>
                            <td>
                                <div>
                                    <label>
                                        <span i18n="receiverRcSetpointTypeSelect"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="helpicon cf_tip" i18n_title="receiverRcSmoothingSetpointManual"></div>
                            </td>
                        </tr>
                        <tr class="rcSmoothing-setpoint-manual">
                            <td class="rcSmoothing-setpoint-cutoff"><input type="number" name="rcSmoothingSetpointHz-number" step="1" min="1" max="255"/></td>
                            <td class="rcSmoothing-setpoint-cutoff" colspan="2">
                                <div>
                                    <label>
                                        <span i18n="receiverRcSmoothingSetpointHz"></span>
                                    </label>
                                    <div class="helpicon cf_tip" i18n_title="rcSmoothingSetpointCutoffHelp"></div>
                                </div>
                            </td>
                        </tr>
                        <tr class="rcSmoothing-feedforward-manual">
                            <td>
                                <select name="rcSmoothing-feedforward-select">
                                    <option value="0" i18n="receiverRcSmoothingAuto"></option>
                                    <option value="1" i18n="receiverRcSmoothingManual"></option>
                                </select>
                            </td>
                            <td>
                                <div>
                                    <label>
                                        <span i18n="receiverRcFeedforwardTypeSelect"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="helpicon cf_tip" i18n_title="receiverRcSmoothingFeedforwardManual"></div>
                            </td>
                        </tr>
                        <tr class="rcSmoothing-feedforward-manual">
                            <td class="rcSmoothing-feedforward-cutoff"><input type="number" name="rcSmoothingFeedforwardCutoff-number" step="1" min="1" max="255"/></td>
                            <td colspan="2" class="rcSmoothing-feedforward-cutoff">
                                <div>
                                    <label>
                                        <span i18n="receiverRcSmoothingFeedforwardCutoff"></span>
                                    </label>
                                    <div class="helpicon cf_tip" i18n_title="rcSmoothingFeedforwardCutoffHelp"></div>
                                </div>
                            </td>
                        </tr>
                        <tr class="rcSmoothing-auto-factor">
                            <td>
                                <input type="number" name="rcSmoothingAutoFactor-number" step="1" min="0" max="250">
                            </td>
                            <td>
                                <div>
                                    <label>
                                        <span i18n="receiverRcSmoothingAutoFactor"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="helpicon cf_tip receiverRcSmoothingAutoFactorHelp" i18n_title="receiverRcSmoothingAutoFactorHelp"></div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="gui_box grey">
            <div class="spacer">
                <div class="wrapper graphAndLabel">
                    <svg id="RX_plot" class="col-span-5">
                        <g class="axis x" transform="translate(40, 188)"></g>
                        <g class="axis y" transform="translate(40, 10)"></g>
                        <g class="grid x" transform="translate(40, 188)"></g>
                        <g class="grid y" transform="translate(40, 10)"></g>
                        <g class="data" transform="translate(40, 10)"></g>
                    </svg>

                    <div class="plot_control">
                        <div class="table">
                            <div class="sensor row">
                                <div class="left-cell receiver-button">
                                    <a class="reset_rate" href="#" i18n="receiverResetRefreshRate" i18n_title="receiverResetRefreshRateTitle"></a>
                                </div>
                                <div class="right-cell">
                                    <select name="rx_refresh_rate" i18n_title="receiverRefreshRateTitle">
                                        <option value="10">10 ms</option>
                                        <option value="20">20 ms</option>
                                        <option value="30">30 ms</option>
                                        <option value="40">40 ms</option>
                                        <option value="50" selected="selected">50 ms</option>
                                        <option value="100">100 ms</option>
                                        <option value="250">250 ms</option>
                                        <option value="500">500 ms</option>
                                        <option value="1000">1000 ms</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row-container">
                                <div class="row">
                                    <div class="left-cell">
                                        <ul>
                                            <li class="name" i18n="receiverRowContainerRoll"></li>
                                        </ul>
                                    </div>
                                    <div class="ch1 value right-cell">
                                        0
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="left-cell">
                                        <ul>
                                            <li class="name" i18n="receiverRowContainerPitch"></li>
                                        </ul>
                                    </div>
                                    <div class="ch2 value right-cell">
                                        0
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="left-cell">
                                        <ul>
                                            <li class="name" i18n="receiverRowContainerYaw"></li>
                                        </ul>
                                    </div>
                                    <div class="ch3 value right-cell">
                                        0
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="left-cell">
                                        <ul>
                                            <li class="name" i18n="receiverRowContainerThrottle"></li>
                                        </ul>
                                    </div>
                                    <div class="ch4 value right-cell">
                                        0
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear-both"></div>
    </div>
</div>
<div class="content_toolbar toolbar_fixed_bottom">
    <div class="btn sticks_btn">
        <a class="sticks" href="#" i18n="receiverButtonSticks"></a>
    </div>
    <div class="btn bind_btn">
        <a class="bind" href="#" i18n="receiverButtonBind"></a>
    </div>
    <div class="btn refresh_btn">
        <a class="refresh" href="#" i18n="receiverButtonRefresh"></a>
    </div>
    <div class="btn update_btn">
        <a class="update" href="#" i18n="receiverButtonSave"></a>
    </div>
    <div class="btn save_btn">
        <a class="save" href="#" i18n="configurationButtonSave"></a>
    </div>
</div>
